<!-- 会员中心 -->
<template>
	<view class="memberRecharge">
		<image class="bg" src="/static/images/memberRecharge-bg.png" mode="aspectFit"></image>

		<view class="top">
			<text class="title">会员中心</text>

			<image class="vip" src="/static/images/VIP.png" mode="aspectFit"></image>

			<text class="hui-yuan">会员</text>

			<text class="status">{{pageData.time}}</text>

			<image class="icon" src="/static/images/vipicon.png" mode="aspectFit"></image>

		</view>

		<view class="center">
			<view class="center-title">
				<text class="center-title-left">{{pageData.text}}</text>
				<text class="center-title-right">开通会员享多重会员权益</text>
			</view>

			<view class="center-list">
				<view :class="{
					'center-list-item':true,
					'center-list-item-select': res.status
				}" v-for="res in listData" @click="checkCardData(res)">
					<view class="tips" v-if="res.tip">
						{{res.tip}}
					</view>

					<text>{{res.name}}</text>
					<text class="money">{{'￥' + res.money}}</text>
					<text>{{res.cardName}}</text>

				</view>
			</view>

			<view class="center-buttom" @click="submit">
				确认协议并支付
			</view>

			<view class="center-agreement">
				<uni-icons :type="pageData.status ? 'circle-filled' : 'circle'" size="36rpx" color="#ECBD7B"
					@click="chackStatus"></uni-icons>

				<view class="text">
					我已阅读并同意
					<text class="text-1">《会员开通协议》</text>
				</view>
			</view>

		</view>

		<view class="botton">
			<text class="botton-title">会员权益</text>

			<view class="botton-list">
				<view class="item" v-for="res in equityData">
					<image class="image" :src="res.icon" mode="aspectFit"></image>
					<text>{{res.text1}}</text>
					<text>{{res.text2}}</text>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	// api引入
	import {
		getDepositParamApi, // 获取会员参数
		getWalletDepositApi, // 会员充值

	} from '@/api/me.js'


	export default {
		data() {
			return {
				listData: [{
						id: 1,
						tip: '限时特惠',
						name: '年度会员',
						money: 2888,
						cardName: '钻石卡',
						status: false,
					},
					{
						id: 2,
						tip: '',
						name: '月度会员',
						money: 388,
						cardName: '银卡',
						status: false,
					},
					{
						id: 3,
						tip: '',
						name: '季度会员',
						money: 888,
						cardName: '金卡',
						status: false
					}
				],

				// 会员权益
				equityData: [{
						icon: '/static/images/icon-yu-yue.png',
						text1: '预约单权益',
						text2: '预约友伴6.5折'
					},
					{
						icon: '/static/images/icon-fa-bu.png',
						text1: '活动发布权益',
						text2: '享188次'
					},
					{
						icon: '/static/images/icon-wu-zhe.png',
						text1: '制定商K权益',
						text2: '预约酒水5折'
					},


				],

				// 页面数据
				pageData: {
					time: '未开通', // 到期时间
					text: 'DD友伴会员', // 续费DD会员
					status: false, // 是否同意
					checkData: {}, // 选中数据
				},


				type: false, //  是否开通

			};
		},
		onLoad(props) {
			this.dataInit(props)

		},
		onShow() {
			this.init()
		},

		methods: {
			/**
			 * 初始化
			 */
			init(val) {
				this.getDepositParam()
			},

			/**
			 * 数据初始化
			 */
			dataInit(val) {

				// 是否是会员
				this.type = val.type === "true" ? true : false

				// 显示数据
				let obj = {}
				if (this.type) {
					obj = {
						time: '会员到期时间: ' + '2024年12月31日',
						text: '续费DD友伴会员',
					}
				}

				// 合并对象
				Object.assign(this.pageData, obj)

				// 赋值一个选择项
				this.checkCardData(this.listData[0])
			},

			/**
			 * 获取会员充值参数
			 */
			async getDepositParam(params) {
				const res = await getDepositParamApi(params);
				if (res.code !== 200) {
					this.$public.showText(res.msg || '请求失败')
					return
				}

				console.log(res, 'kaljflkj');

			},





			/**
			 * 更改权益数据
			 */
			setEquityData(val) {
				let arr = []
				let arr2 = ['预约友伴', '享', '预约酒水']
				let arr3 = ['折', '次', '折']
				if (val.id === 1) {
					arr = ['6.5', '188', '5']
				}
				if (val.id === 2) {
					arr = ['7.5', '8', '7']
				}
				if (val.id === 3) {
					arr = ['7', '38', '6']
				}

				this.equityData.forEach((res, index) => {
					this.equityData[index].text2 = arr2[index] + arr[index] + arr3[index]
				})
			},

			/**
			 * 是否勾选协议
			 */
			chackStatus() {
				this.pageData.status = !this.pageData.status
			},

			/**
			 * 支付
			 */
			submit() {
				if (!this.pageData.status) {
					return this.$public.showText('请勾选已阅读并同意会员开通协议')
				}

				let str = this.pageData.checkData
				this.$public.showText(str.name + '-' + str.cardName + '-￥' + str.money)
				console.log(str, '这是选中数据', this.pageData.checkData);


			},

			/**
			 * 切换选择的卡片
			 */
			checkCardData(val) {

				// 改变选中值
				this.listData.map(res => {
					if (res.id === val.id) {
						this.pageData.checkData = res
						res.status = true
					} else {
						res.status = false
					}
				})

				// 改变选中的权益内容
				this.setEquityData(val)

				console.log(this.listData, 'kdlajfjl');
			}
		}
	}
</script>

<style lang="less" scoped>
	.memberRecharge {
		position: relative;
		min-height: 100vh;

		#flex(column, -, -);

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;

			#box(100%, 336rpx);
		}

		.top {
			#box(100%, 300rpx);
			position: relative;

			.title {
				position: absolute;
				left: 50%;
				top: 64rpx;
				margin-left: -64rpx;

				#font(32rpx, #fdf3f3);
			}

			.vip {
				position: absolute;
				left: 60rpx;
				bottom: 76rpx;
				#box(120rpx, 64rpx);
			}

			.hui-yuan {
				#font(44rpx, #fff, 400);
				position: absolute;
				left: 192rpx;
				bottom: 88rpx;
				background-image: linear-gradient(180deg, #FFEEDC 29%, #AD8D6B 74%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;

			}

			.status {
				#font(28rpx, #9e9e9e);
				position: absolute;
				left: 60rpx;
				bottom: 40rpx;
			}

			.icon {
				position: absolute;
				right: 32rpx;
				bottom: -60rpx;
				#box(236rpx);
			}


		}


		.center {
			#box(100%, -, 56rpx 56rpx 0 0, #fff);
			#padding(60rpx 48rpx 32rpx 48rpx);

			position: relative;
			z-index: 1000;


			.center-title {
				#flex(-, -, center);
				#font(28rpx, #C4BCA5, 400);

				.center-title-left {
					#font(36rpx, #5E4C39, 600);
					margin-right: 16rpx;
				}
			}

			.center-list {
				margin-top: 44rpx;
				gap: 24rpx;
				#flex(-, -, center);

				.center-list-item {
					#box(200rpx, 240rpx, 16rpx);
					#flex(column, center, center);
					#font(28rpx, #5e4c39, 600);
					box-sizing: border-box;
					border: 2rpx solid #E1CD94;
					position: relative;
					gap: 12rpx;

					.tips {
						#position(absolute, 0, 0);
						#padding(8rpx 12rpx);
						#font(22rpx, #fff);
						border-radius: 16rpx 0 16rpx 0;
						background: linear-gradient(109deg, #FF1B3A 0%, #F28866 99%);
					}

					.money {
						#font(48rpx, #5E4C39, 700);
					}


				}

				.center-list-item-select {
					border: none;
					background: linear-gradient(180deg, #E1CD94 0%, #F7E2AA 100%);
				}
			}


			.center-buttom {
				#box(100%, 88rpx, 100rpx, linear-gradient(270deg, #ECBD7B 0%, #F6DE97 100%));
				#flex(-, center, center);
				#font(36rpx, #5E4C39, 600);

				margin-top: 44rpx;
			}

			.center-agreement {
				#flex(-, center, center);

				margin-top: 24rpx;

				.text {
					#font(24rpx, #9E9E9E);
					margin-left: 8rpx;

					.text-1 {
						font-weight: 600;
						color: #5E4C39;
					}

				}
			}



		}

		.botton {
			#box(100%, -, -, #fff);
			#padding(36rpx 48rpx 0 48rpx);
			flex: 1;

			margin-top: 16rpx;

			.botton-title {
				#font(36rpx, #5E4C39, 600);
			}

			.botton-list {
				#flex(-, space-between, -);
				#padding(0 36rpx);
				width: 100%;
				margin-top: 32rpx;

				.item {
					#flex(column, -, center);
					#font(28rpx, #9E9E9E);
					#box(112rpx, -);
					line-height: 42rpx;
					white-space: nowrap;

					.image {
						#box(112rpx);
						margin-bottom: 16rpx;
					}
				}
			}


		}
	}
</style>
<style>
	page,
	uni-app {
		background: #F6F6F9;
	}
</style>